<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<title>产品详情页</title>
	 <link rel="icon" href="assets/img/favicon.ico">

    <link rel="stylesheet" type="text/css" href="css/webbase.css" />
    <link rel="stylesheet" type="text/css" href="css/pages-item.css" />
    <link rel="stylesheet" type="text/css" href="css/pages-zoom.css" />
    <link rel="stylesheet" type="text/css" href="css/widget-cartPanelView.css" />
</head>

<body>
<#--转json指令-->
<#assign images=goodsDesc.itemImages?eval><#--把字符串转成对象-->
<#--自定义属性=商品介绍那块-->
<#assign customList=goodsDesc.customAttributeItems?eval>
<#--规格与规格选项-->
<#assign specificationItems=goodsDesc.specificationItems?eval>
<#-- 并以js变量得形式保存到当前页面中 -->
<script>
    //定义SKU列表变量[{id:111,xxx:xx},{id:2,xxx:xx}]
    /*对于freemarker来讲数字类型得数字一旦但与千位数会自动补全 ，会成为1,123,234*/
    var itemList=[
        <#list itemList as item>
        {
            "id":${item.id?c},/*?c 去掉千位自动补全*/
            "title":"${item.title}",/*在数据库里是String类型需要家""*/
            "sellPoint":"${item.sellPoint}",
            "price":${item.price?c}, /*?c 去掉千位自动补全*/
            "spec":${item.spec}
        },
        </#list>
    ]
</script>

<!--页面顶部 开始-->
<#include "head.ftl">
<!--页面顶部 结束-->
	<div class="py-container">
		<div id="item">
			<div class="crumb-wrap">
				<ul class="sui-breadcrumb">
					<li>
						<a href="#">${itemCat1.name}</a>
					</li>
					<li>
						<a href="#">${itemCat2.name}</a>
					</li>
					<li>
						<a href="#">${itemCat3.name}</a>
					</li>
					<li class="active">${goods.goodsName}</li>
				</ul>
			</div>
            <input type="hidden" id="itemId">
            <input type="hidden" name="goodsId" value="${goods.id}">
			<!--product-info-->
			<div class="product-info">
				<div class="fl preview-wrap">
					<!--放大镜效果-->
					<div class="zoom">
						<!--默认第一个预览-->
						<div id="preview" class="spec-preview">
                            <#if images?size gt 0>
							<span class="jqzoom"><img jqimg="${images[0].url}" src="${images[0].url}" ></span>
                                <span></span>
                            </#if>
						</div>
						<!--下方的缩略图-->
						<div class="spec-scroll">
							<a class="prev">&lt;</a>
							<!--左右按钮-->
							<div class="items">
								<ul>
                                    <#list images as img>
									<li><img src="${img.url}" bimg="${img.url}" onmousemove="preview(this)" ></li>
								    </#list>
                                </ul>
							</div>
							<a class="next">&gt;</a>
						</div>
					</div>
				</div>
				<div class="fr itemInfo-wrap">
					<div class="sku-name">
						<h4>${goods.goodsName}</h4>
					</div>
					<div class="news"><span>${goods.caption}</span></div>
					<div class="summary">
						<div class="summary-wrap">
							<div class="fl title">
								<i>价　　格</i>
							</div>
							<div class="fl price">
								<i>¥</i>
								<span id="price">${goods.price}</span>
								<span>降价通知</span>
							</div>
							<div class="fr remark">
								<i>累计评价</i><em>612188</em>
							</div>
						</div>
						<div class="summary-wrap">
							<div class="fl title">
								<i>促　　销</i>
							</div>
							<div class="fl fix-width">
								<i class="red-bg">加价购</i>
								<em class="t-gray">满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换
购热销商品</em>
							</div>
						</div>
					</div>
					<div class="support">
						<div class="summary-wrap">
							<div class="fl title">
								<i>支　　持</i>
							</div>
							<div class="fl fix-width">
								<em class="t-gray">以旧换新，闲置手机回收  4G套餐超值抢  礼品购</em>
							</div>
						</div>
						<div class="summary-wrap">
							<div class="fl title">
								<i>配 送 至</i>
							</div>
							<div class="fl fix-width">
								<em class="t-gray">满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换购热销商品</em>
							</div>
						</div>
					</div>
					<div class="clearfix choose">
						<div id="specification" class="summary-wrap clearfix">
                            <#list specificationItems as spec>
							<dl>
								<dt>
									<div class="fl title">
									<i>${spec.attributeName}</i>
								</div>
								</dt>
								<#list spec.attributeValue as value>
<#--                                    方法在js/item.js  都是字符串需要用''包着-->
								    <dd><a name="specOptions" href="javascript:selectSpec('${spec.attributeName}','${value}');">${value}</a></dd>
								</#list>
							</dl>
                            </#list>
<#--						-->

						</div>
					
						<div class="summary-wrap">
							<div class="fl title">
								<div class="control-group">
									<div class="controls">
										<input autocomplete="off" type="text" value="1" minnum="1" class="itxt" />
										<a href="javascript:increment(1)" class="increment plus">+</a><#--方法在food.ftl里 引入js/item.js-->
										<a href="javascript:increment(-1)" class="increment mins">-</a>
									</div>
								</div>
							</div>
							<div class="fl">
								<ul class="btn-choose unstyled">
									<li>
										<#--<a href="javascript:addCart()" target="_blank" class="sui-btn  btn-danger addshopcar">加入购物车</a>-->
                                        <button onclick="addCart()" target="_blank" class="sui-btn  btn-danger addshopcar" >加入购物车</button>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!--product-detail-->
			<div class="clearfix product-detail">
				<div class="fl aside">
					<ul class="sui-nav nav-tabs tab-wraped">
						<li class="active">
							<a href="#index" data-toggle="tab">
								<span>相关分类</span>
							</a>
						</li>
						<li>
							<a href="#profile" data-toggle="tab">
								<span>推荐品牌</span>
							</a>
						</li>
					</ul>
					<div class="tab-content tab-wraped">
						<div id="index" class="tab-pane active">
							<ul class="part-list unstyled">
								<li>手机</li>
								<li>手机壳</li>
								<li>内存卡</li>
								<li>Iphone配件</li>
								<li>贴膜</li>
								<li>手机耳机</li>
								<li>移动电源</li>
								<li>平板电脑</li>
							</ul>
							<ul class="goods-list unstyled">
								<li>
									<div class="list-wrap">
										<div class="p-img">
											<img src="img/_/part01.png" />
										</div>
										<div class="attr">
											<em>Apple苹果iPhone 6s (A1699)</em>
										</div>
										<div class="price">
											<strong>
											<em>¥</em>
											<i>6088.00</i>
										</strong>
										</div>
										<div class="operate">
											<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
										</div>
									</div>
								</li>
								<li>
									<div class="list-wrap">
										<div class="p-img">
											<img src="img/_/part02.png" />
										</div>
										<div class="attr">
											<em>Apple苹果iPhone 6s (A1699)</em>
										</div>
										<div class="price">
											<strong>
											<em>¥</em>
											<i>6088.00</i>
										</strong>
										</div>
										<div class="operate">
											<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
										</div>
									</div>
								</li>
								<li>
									<div class="list-wrap">
										<div class="p-img">
											<img src="img/_/part03.png" />
										</div>
										<div class="attr">
											<em>Apple苹果iPhone 6s (A1699)</em>
										</div>
										<div class="price">
											<strong>
											<em>¥</em>
											<i>6088.00</i>
										</strong>
										</div>
										<div class="operate">
											<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
										</div>
									</div>
									<div class="list-wrap">
										<div class="p-img">
											<img src="img/_/part02.png" />
										</div>
										<div class="attr">
											<em>Apple苹果iPhone 6s (A1699)</em>
										</div>
										<div class="price">
											<strong>
											<em>¥</em>
											<i>6088.00</i>
										</strong>
										</div>
										<div class="operate">
											<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
										</div>
									</div>
									<div class="list-wrap">
										<div class="p-img">
											<img src="img/_/part03.png" />
										</div>
										<div class="attr">
											<em>Apple苹果iPhone 6s (A1699)</em>
										</div>
										<div class="price">
											<strong>
											<em>¥</em>
											<i>6088.00</i>
										</strong>
										</div>
										<div class="operate">
											<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
										</div>
									</div>
								</li>
							</ul>
						</div>
						<div id="profile" class="tab-pane">
							<p>推荐品牌</p>
						</div>
					</div>
				</div>
				<div class="fr detail">
					<div class="clearfix fitting">
						<h4 class="kt">选择搭配</h4>
						<div class="good-suits">
							<div class="fl master">
								<div class="list-wrap">
									<div class="p-img">
										<img src="img/_/l-m01.png" />
									</div>
									<em>￥5299</em>
									<i>+</i>
								</div>
							</div>
							<div class="fl suits">
								<ul class="suit-list">
									<li class="">
										<div id="">
											<img src="img/_/dp01.png" />
										</div>
										<i>Feless费勒斯VR</i>
										<label data-toggle="checkbox" class="checkbox-pretty">
    <input type="checkbox"><span>39</span>
  </label>
									</li>
									<li class="">
										<div id=""><img src="img/_/dp02.png" /> </div>
										<i>Feless费勒斯VR</i>
										<label data-toggle="checkbox" class="checkbox-pretty">
    <input type="checkbox"><span>50</span>
  </label>
									</li>
									<li class="">
										<div id=""><img src="img/_/dp03.png" /></div>
										<i>Feless费勒斯VR</i>
										<label data-toggle="checkbox" class="checkbox-pretty">
    <input type="checkbox"><span>59</span>
  </label>
									</li>
									<li class="">
										<div id=""><img src="img/_/dp04.png" /></div>
										<i>Feless费勒斯VR</i>
										<label data-toggle="checkbox" class="checkbox-pretty">
    <input type="checkbox"><span>99</span>
  </label>
									</li>
								</ul>
							</div>
							<div class="fr result">
								<div class="num">已选购0件商品</div>
								<div class="price-tit"><strong>套餐价</strong></div>
								<div class="price">￥5299</div>
								<button class="sui-btn  btn-danger addshopcar">加入购物车</button>
							</div>
						</div>
					</div>
					<div class="tab-main intro">
						<ul class="sui-nav nav-tabs tab-wraped">
							<li class="active">
								<a href="#one" data-toggle="tab">
									<span>商品介绍</span>
								</a>
							</li>
							<li>
								<a href="#two" data-toggle="tab">
									<span>规格与包装</span>
								</a>
							</li>
							<li>
								<a href="#three" data-toggle="tab">
									<span>售后保障</span>
								</a>
							</li>
							<li>
								<a href="#four" data-toggle="tab">
									<span onclick="getCommentByGoodsId()">商品评价</span>
								</a>
							</li>
							<li>
								<a href="#five" data-toggle="tab">
									<span>手机社区</span>
								</a>
							</li>
						</ul>
						<div class="clearfix"></div>
						<div class="tab-content tab-wraped">
							<div id="one" class="tab-pane active">
								<ul class="goods-intro unstyled">
                                    <#list customList as custom>
                                        <li>${custom.text}：${custom.value}</li>
                                    </#list>
								</ul>
								<div class="intro-detail">
                                    ${goodsDesc.introduction}
									<#--<img src="img/_/intro01.png" />
									<img src="img/_/intro02.png" />
									<img src="img/_/intro03.png" />-->
								</div>
							</div>
							<div id="two" class="tab-pane">
								<p> ${goodsDesc.packageList}</p>
							</div>
							<div id="three" class="tab-pane">
								<p>${goodsDesc.saleService}</p>
							</div>
							<div id="four" class="tab-pane">
								<p>商品评价</p>
							</div>
							<div id="five" class="tab-pane">
								<p>手机社区</p>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!--like-->
			<div class="clearfix"></div>
			<div class="like">
				<h4 class="kt">猜你喜欢</h4>
				<div class="like-list">
					<ul class="yui3-g">
						<li class="yui3-u-1-6">
							<div class="list-wrap">
								<div class="p-img">
									<img src="img/_/itemlike01.png" />
								</div>
								<div class="attr">
									<em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
								</div>
								<div class="price">
									<strong>
											<em>¥</em>
											<i>3699.00</i>
										</strong>
								</div>
								<div class="commit">
									<i class="command">已有6人评价</i>
								</div>
							</div>
						</li>
						<li class="yui3-u-1-6">
							<div class="list-wrap">
								<div class="p-img">
									<img src="img/_/itemlike02.png" />
								</div>
								<div class="attr">
									<em>Apple苹果iPhone 6s/6s Plus 16G 64G 128G</em>
								</div>
								<div class="price">
									<strong>
											<em>¥</em>
											<i>4388.00</i>
										</strong>
								</div>
								<div class="commit">
									<i class="command">已有700人评价</i>
								</div>
							</div>
						</li>
						<li class="yui3-u-1-6">
							<div class="list-wrap">
								<div class="p-img">
									<img src="img/_/itemlike03.png" />
								</div>
								<div class="attr">
									<em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
								</div>
								<div class="price">
									<strong>
											<em>¥</em>
											<i>4088.00</i>
										</strong>
								</div>
								<div class="commit">
									<i class="command">已有700人评价</i>
								</div>
							</div>
						</li>
						<li class="yui3-u-1-6">
							<div class="list-wrap">
								<div class="p-img">
									<img src="img/_/itemlike04.png" />
								</div>
								<div class="attr">
									<em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
								</div>
								<div class="price">
									<strong>
											<em>¥</em>
											<i>4088.00</i>
										</strong>
								</div>
								<div class="commit">
									<i class="command">已有700人评价</i>
								</div>
							</div>
						</li>
						<li class="yui3-u-1-6">
							<div class="list-wrap">
								<div class="p-img">
									<img src="img/_/itemlike05.png" />
								</div>
								<div class="attr">
									<em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
								</div>
								<div class="price">
									<strong>
											<em>¥</em>
											<i>4088.00</i>
										</strong>
								</div>
								<div class="commit">
									<i class="command">已有700人评价</i>
								</div>
							</div>
						</li>
						<li class="yui3-u-1-6">
							<div class="list-wrap">
								<div class="p-img">
									<img src="img/_/itemlike06.png" />
								</div>
								<div class="attr">
									<em>DELL戴尔Ins 15MR-7528SS 15英寸 银色 笔记本</em>
								</div>
								<div class="price">
									<strong>
											<em>¥</em>
											<i>4088.00</i>
										</strong>
								</div>
								<div class="commit">
									<i class="command">已有700人评价</i>
								</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<!-- 底部栏位 -->

<!--页面底部  开始 -->
<#include "food.ftl">

<!--页面底部  结束 -->
</body>
<script>

    function getCommentByGoodsId(){
        $.ajax({
            url: "http://localhost:9003/comment/getCommentByGoodsId",
            type: "post",
            dataType: "json",
            data:{goodsId:149187842868005,pageNumber:$("#pageNumber").val(),pageSize:$("#pageSize").val()},
            success: function (result) {
                if(result.code == 200) {
                    var comment = result.data.list;
                    var html = "";
                    for (var i = 0; i < comment.length; i++) {
                        html += "<table>";
                        html += "<tr>";
                        html += "<td>用户昵称：</td>";
                        html += "<td>" + comment[i].userName + "</td>";
                        html += "</tr>";
                        html += "<tr>";
                        html += "<td>评价时间：</td>";
                        html += "<td>" + comment[i].startTime + "</td>";
                        html += "</tr>";
                        html += "<tr>";
                        html += "<td>评价内容：</td>";
                        html += "<td>" + comment[i].content + "</td>";
                        html += "</tr>";
                        html += "</table>";
                        html += "<br>";
                    }
                    html += '<div class="pageNum">';
                    html += '<form id="pageForm">';
                    html += '<ul>';
                    html += '<li><a href="javascript:toPage(1);">首页</a></li>';
                    html += '<li class="threeword"><a href="javascript:toPage(2)">上一页</a></li>';
                    html += '<div id="pages"></div>';
                    html += '<li class="threeword"><a href="javascript:toPage(3)">下一页</a></li>';
                    html += '<li class="threeword"><a href="javascript:toPage(4)">末页</a></li>';
                    html += '</ul>';
                    html += '<input type="hidden" name="pageNumber" id="pageNumber" size="2">';
                    html += '<input type="hidden" name="pageSize" id="pageSize" size="2">';
                    html += '<input type="hidden" name="totalCount" id="totalCount" size="2">';
                    html += '<input type="hidden" name="totalPage" id="totalPage">';
                    html += '</form>';
                    html += '</div>';
                    $("#four").html(html);
                    buildPage(result.data);
                }else{
                    alert("查询失败");
                }
            },
            error:function(){
                alert("系统错误");
            }
        })

        function buildPage(data) {
            $("#showPages").html(data.totalPage);
            $("#showCount").html(data.total);

            $("#pageNumber").val(data.pageNumber);
            $("#totalPage").val(data.totalPage);
            $("#totalCount").val(data.total);

            var str = '';
            for(var i = 1;i<=data.totalPage;i++){
                str += '<li>';
                str += '<a href="javascript:setPageNumber('+i+')">'+i+'<a/>';
                str += '</li>';
                $("#pages").html(str);
            }
        }
    }

    function toPage(flag) {
        var pageNumber = parseInt($("#pageNumber").val());
        var totalPage = parseInt($("#totalPage").val());
        if (flag == 1) {
            if (pageNumber <= 1) {
                alert("已经是第一页");
                return;
            }
            $("#pageNumber").val(1);
        } else if (flag == 2) {
            if (pageNumber <= 1) {
                alert("已经是第一页");
                return;
            }
            $("#pageNumber").val(pageNumber - 1);
        } else if (flag == 3) {
            if (pageNumber >= totalPage) {
                alert("已经是最后一页");
                return;
            }
            $("#pageNumber").val(pageNumber + 1);
        } else if (flag == 4) {
            if (pageNumber >= totalPage) {
                alert("已经最后第一页");
                return;
            }
            $("#pageNumber").val(totalPage);
        }
        getCommentByGoodsId();
    }

    //设置页数
    function setPageNumber(number){
        $("#pageNumber").val(number);
        getCommentByGoodsId();
    }
</script>
</html>